<template>
	<view class="box">
		<template v-if="isSuccess">
			<view class="hbh_up" v-for="(item,index) in list" :key="index">
				<view class="hbh_oneTitle">
					<view class="hbh_icon">

					</view>
					<text>{{item.classifyName}}</text>
					<view class="hbh_more" @click="more">
						去书库
					</view>
				</view>
				<view class="hbh_list">
					<view class="hbh_child" v-for="(k,p) in item.data" :key="p" @click="handelClick(k)">
						<view class="hbh_picture">
							<image v-if="k.noLoad !=3"
								:src="k.noLoad==1?'/static/image/loadingNovel.png':k.cover_image"
								mode="scaleToFill" @error="imageError($event,index,p)"
								@load="imageLoad($event,index,p)"></image>
							<image v-if="k.noLoad ==3" src="/static/image/nopic.gif" mode="scaleToFill">
							</image>
						</view>
						<text>{{k.book_name}}</text>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="loadImage">
				<image src="/static/loading.webp" mode=""></image>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		selectNovel,
		getFourNovel
	} from "@/api/index.js"
	export default {
		name: "homeList",
		data() {
			return {
				pageSize: 4,
				pageNum: 1,
				list: [{
						classify_id: "10001",
						classifyName: "奇幻玄幻",
						data: [],
					},
					{
						classify_id: "10002",
						classifyName: "武侠仙侠",
						data: [],
					}, {
						classify_id: "10003",
						classifyName: "历史军事",
						data: [],
					}, {
						classify_id: "10004",
						classifyName: "都市娱乐",
						data: [],
					},
					{
						classify_id: "10005",
						classifyName: "竞技同人",
						data: [],
					}, {
						classify_id: "10006",
						classifyName: "科幻游戏",
						data: [],
					}, {
						classify_id: "10007",
						classifyName: "悬疑灵异",
						data: [],
					}, {
						classify_id: "10008",
						classifyName: "评论文集",
						data: [],
					}, {
						classify_id: "10009",
						classifyName: "其他",
						data: [],
					}
				],
				isSuccess: false
			};
		},
		created() {
			if (uni.getStorageSync("TOKEN")) {
				this.getNovel()
			} else {
				uni.reLaunch({
					url: "/pages/login/login"
				})
			}

		},
		methods: {
			handelClick(val) {
				uni.navigateTo({
					url: "/pages/bookInfo/bookInfo?book_id=" + val.book_id,
					animationType: 'slide-in-left',
					animationDuration: 200
				})
			},
			more() {
				console.log("更多")
				uni.navigateTo({
					url: "/pages/searchBook/searchBook"
				})
			},
			imageError(e, index, p) {
				let item = this.list[index].data[p]
				item.noLoad = 3
				this.$set(this.list[index].data[p], p, item)
			},
			imageLoad(e, index, p) {
				let item = this.list[index].data[p]
				item.noLoad = 2
				this.$set(this.list[index].data[p], p, item)
			},
			//查询小说
			getNovel() {
				getFourNovel().then((res) => {
					console.log(res)
					if (res.code == 200) {
						this.isSuccess = true
						res.data.forEach((item, index) => {
							this.list.forEach((k, p) => {
								if (item.classify_id == k.classify_id) {
									item.rows.forEach((m, n) => {
										m.noLoad = 1
									})
									this.list[p].data = item.rows
								}
							})
						})
					}
				}).catch((err) => {
					console.log(err)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		height: 100%;
		overflow-y: scroll;

		.loadImage {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

	}

	.hbh_up {
		margin-bottom: 30rpx;
	}

	.hbh_list {
		display: flex;
		flex-wrap: wrap;
		color: #fff;

		.hbh_child {
			width: 25%;
			padding: 0 10rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.hbh_picture {
				width: 160rpx;
				height: 170rpx;
				border-radius: 0px 0px 0px 0px;
				opacity: 1;
				margin-bottom: 13rpx;
				border-radius: 20rpx;
				overflow: hidden;
				box-shadow: 0rpx 0rpx 20rpx #55ffff;

				image {
					width: 100%;
					height: 100%;
					will-change: transform;
				}
			}

			text {
				font-size: 26rpx;
				font-weight: 400;
				height: 110rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				/* 显示行数 */
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
</style>